<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagrams</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            margin-top: 20px;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="950" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 8) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Draw Diagram 1 (电图 2.12.1) ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    // Main tube
    const tubeX = 50, tubeY = 70, tubeW = 390, tubeH = 150;
    ctx.strokeRect(tubeX, tubeY, tubeW, tubeH);

    // Dividers and regions
    const regionW = tubeW / 3;
    const divider1X = tubeX + regionW;
    const divider2X = tubeX + 2 * regionW;
    const centerY = tubeY + tubeH / 2;

    ctx.beginPath();
    ctx.moveTo(divider1X, tubeY);
    ctx.lineTo(divider1X, tubeY + tubeH);
    ctx.moveTo(divider2X, tubeY);
    ctx.lineTo(divider2X, tubeY + tubeH);
    ctx.stroke();

    // Dashed axis
    ctx.save();
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(tubeX, centerY);
    ctx.lineTo(tubeX + tubeW, centerY);
    ctx.stroke();
    ctx.restore();

    // Holes A and A'
    ctx.beginPath();
    ctx.arc(divider1X, centerY, 5, 0, 2 * Math.PI);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(divider2X, centerY, 5, 0, 2 * Math.PI);
    ctx.stroke();

    // Cathode and accelerator symbol
    const cathodeX = tubeX + 30;
    ctx.beginPath();
    ctx.moveTo(cathodeX - 5, centerY - 15); // Short line for negative terminal
    ctx.lineTo(cathodeX - 5, centerY + 15);
    ctx.moveTo(cathodeX, centerY - 20); // Long line for positive terminal
    ctx.lineTo(cathodeX, centerY + 20);
    ctx.stroke();
    
    // Labels
    ctx.font = '22px Times New Roman';
    // Region labels
    ctx.fillText('I', tubeX + regionW/2 - 10, tubeY + 30);
    ctx.fillText('II', divider1X + regionW/2 - 10, tubeY + 30);
    ctx.fillText('III', divider2X + regionW/2 - 10, tubeY + 30);

    // Point labels
    ctx.fillText('K', cathodeX - 25, centerY + 40);
    ctx.fillText('A', divider1X - 10, centerY + 40);
    ctx.fillText('B', divider1X + regionW/2 - 10, centerY + 40);
    ctx.fillText("A'", divider2X - 10, centerY + 40);

    // Velocity arrow in region II
    drawArrow(ctx, divider1X + 20, centerY, divider2X - 20, centerY);

    // Dimensions R and L
    ctx.font = 'italic 22px Times New Roman';
    // Dimension R
    ctx.beginPath();
    ctx.moveTo(divider2X + 40, tubeY);
    ctx.lineTo(divider2X + 40, centerY);
    ctx.stroke();
    drawArrow(ctx, divider2X + 40, tubeY, divider2X + 40, tubeY, -8);
    drawArrow(ctx, divider2X + 40, centerY, divider2X + 40, centerY, 8);
    ctx.fillText('R', divider2X + 50, centerY - 30);
    
    // Dimension L
    ctx.beginPath();
    ctx.moveTo(divider1X, tubeY + tubeH + 30);
    ctx.lineTo(divider2X, tubeY + tubeH + 30);
    ctx.stroke();
    drawArrow(ctx, divider1X, tubeY + tubeH + 30, divider1X, tubeY + tubeH + 30, 8);
    drawArrow(ctx, divider2X, tubeY + tubeH + 30, divider2X, tubeY + tubeH + 30, -8);
    ctx.fillText('L', divider1X + regionW/2 - 10, tubeY + tubeH + 25);

    // Caption for diagram 1
    ctx.font = '20px SimSun';
    ctx.fillText('电图 2.12.1', tubeX + tubeW/2 - 60, tubeY + tubeH + 65);

    // --- Draw Diagram 2 (电图 2.12.2) ---
    const originX = 550;
    const originY = 180;
    const axisLenX = 350;
    const axisLenY = 150;

    // Draw axes
    ctx.lineWidth = 1.5;
    drawArrow(ctx, originX, originY + axisLenY/2 + 20, originX, originY - axisLenY/2 - 20); // B-axis
    drawArrow(ctx, originX - 20, originY, originX + axisLenX, originY); // t-axis

    // Draw the square wave
    const B0_amp = 70;
    const T_width = 100;
    ctx.beginPath();
    ctx.moveTo(originX, originY - B0_amp);
    ctx.lineTo(originX + T_width/2, originY - B0_amp);
    ctx.lineTo(originX + T_width/2, originY + B0_amp);
    ctx.lineTo(originX + T_width, originY + B0_amp);
    ctx.lineTo(originX + T_width, originY - B0_amp);
    ctx.lineTo(originX + 1.5 * T_width, originY - B0_amp);
    ctx.lineTo(originX + 1.5 * T_width, originY + B0_amp);
    ctx.lineTo(originX + 2 * T_width, originY + B0_amp);
    ctx.lineTo(originX + 2 * T_width, originY - B0_amp);
    ctx.lineTo(originX + 2.2 * T_width, originY - B0_amp);
    ctx.stroke();
    
    // Labels for diagram 2
    ctx.font = 'italic 22px Times New Roman';
    // Axis labels
    ctx.fillText('B', originX - 30, originY - axisLenY/2 - 10);
    ctx.fillText('t', originX + axisLenX + 5, originY + 5);
    ctx.fillText('O', originX - 25, originY + 20);

    // Value labels
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('B', originX - 45, originY - B0_amp + 5);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('0', originX - 32, originY - B0_amp + 10);

    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('–B', originX - 50, originY + B0_amp + 5);
    ctx.font = 'italic 14px Times New Roman';
    ctx.fillText('0', originX - 32, originY + B0_amp + 10);
    
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('T', originX + T_width - 10, originY + 25);
    ctx.fillText('2T', originX + 2 * T_width - 15, originY + 25);
    
    // Caption for diagram 2
    ctx.font = '20px SimSun';
    ctx.fillText('电图 2.12.2', originX + axisLenX/2 - 80, tubeY + tubeH + 65);

</script>
</body>
</html>